<!-- eslint-disable vue/no-v-html -->
<template>
  <div :style="dynamicStyles">{{ propValue.text }}</div>
</template>

<script>
import { mapState } from 'vuex'
import OnEvent from '../common/OnEvent'

export default {
  extends: OnEvent,
  props: {
      propValue: {
          type: Object,
          required: true,
          default: {},
      },
      element: {
          type: Object,
          default: () => { },
      },
  },
  data() {
      return {
          canEdit: false,
          ctrlKey: 17,
          isCtrlDown: false,
          cancelRequest: null,
          dynamicStyles: {
              width: '0px',
              height: '0px',
              borderRadius: '0px',
              fontSize: "0"
          }
      }
  },
  computed: {
      ...mapState([
          'editMode',
          'curComponent',
      ]),
  },
  created() {
      this.getTime()
  },
  watch: {
      'element.style.width': function () {
          const { width, height } = this.element.style
          this.dynamicStyles.width = width + "px"
          this.dynamicStyles.height = height + 'px'
          this.dynamicStyles.borderRadius = this.propValue.border + 'px'
      },
      'element.style.height': function () {
          const { width, height } = this.element.style
          this.dynamicStyles.width = width + "px"
          this.dynamicStyles.height = height + 'px'
          this.dynamicStyles.borderRadius = this.propValue.border + 'px'
      },
      "propValue.fontSize": function () {
          this.dynamicStyles.fontSize = this.propValue.fontSize + 'px'
      },
  },
  mounted() {
      const { width, height } = this.element.style
      this.dynamicStyles.width = width + "px"
      this.dynamicStyles.height = height + 'px'
      this.dynamicStyles.fontSize = this.propValue.fontSize + 'px'
  },
  methods: {
      getTime() {
           this.propValue.text = "25℃~30℃ 晴天"
      }
  },
}
</script>

<style lang="scss" scoped>
.v-text {
  width: 100%;
  height: 100%;
  display: table;

  div {
      display: table-cell;
      width: 100%;
      height: 100%;
      outline: none;
      word-break: break-all;
      padding: 4px;
  }

  .can-edit {
      cursor: text;
      height: 100%;
  }
}

.preview {
  user-select: none;
}
</style>
